<template>
    <div>
        <div style="margin-top: 20px" v-show="loading">
            <van-loading size="24px" vertical color="#0094ff"
                >加载中...</van-loading
            >
        </div>
        <div
            v-for="(item, i) of data"
            :key="i"
            style="margin-top: 8px"
            v-show="show"
        >
            <div class="myorder" @click="detail(item.ordermain.Id)">
                <h3>订单号</h3>
                <p>{{ item.ordermain.Id }}</p>
                <div class="tag-local">
                    <van-tag round type="success" size="large">{{
                        item.ordermain.orderstate
                    }}</van-tag>
                </div>
                <div
                    v-for="(shop, i) of item.orderitems"
                    :key="i"
                    style="margin-top: 8px"
                >
                    <van-card
                        :num="shop.productnum"
                        :title="shop.productname"
                        :thumb="shop.img"
                    >
                        <template #desc>
                            <van-button
                                size="mini"
                                type="warning"
                                plain
                                style="margin-top: 4px"
                                >包邮</van-button
                            >
                        </template>
                        <template #price>
                            <span class="price">￥{{ shop.money }}</span>
                        </template>
                    </van-card>
                </div>
                <p class="fly">邮费<span>￥0</span></p>
                <van-divider class="divider" />
                <div class="sumMone">
                    合计:<span>￥{{ item.ordermain.totalmoney }}</span>
                </div>
            </div>
        </div>
        <van-tabbar route>
            <van-tabbar-item icon="home-o" replace to="/main"
                >主页</van-tabbar-item
            >
            <van-tabbar-item icon="search" replace to="/my"
                >订单</van-tabbar-item
            >
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: [],
            loading: true,
            show: false,
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        detail(val) {
            this.$router.push({
                path: "/myDetail",
                query: { id: val },
            });
        },
        async getData() {
            var datas = {
                userid: "1",
            };
            var res = await this.$API.my.OrderList.get(datas);
            this.loading = false
            if (res.type == 1) {
                this.show = true;
                this.data = res.value.rows;
                for (let item of this.data) {
                    for (let list of item.orderitems) {
                        list.img = "img/" + list.productno + ".png";
                    }
                }
            } else {
                this.show = false;
                Toast.fail(res.message);
            }
        },
    },
};
</script>
<style scoped>
.tag-local {
    position: absolute;
    top: 16px;
    right: 10px;
}
.sumMone {
    float: right;
    margin-top: -20px;
    margin-right: 5px;
}
.sumMone span {
    color: red;
    font-size: 15px;
}
.fly {
    margin-bottom: 20px;
}
.fly span {
    float: right;
}
.divider {
    margin: 20px 0 30px 0;
}
</style>